<!-- src/components/Header.vue -->
<template>
    <div class="header">
      <div class="logo">🏥 医院管理后台</div>
      <div class="user-info">
        <el-icon class="user-icon"><User /></el-icon>
        <span>当前用户：{{ username }}</span>
        <el-button type="text" @click="logout" class="logout-btn">退出登录</el-button>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { User } from '@element-plus/icons-vue'
  const { username } = defineProps<{ username: string }>()
  const emit = defineEmits<{ (e: "logout"): void }>()
  
  const logout = () => {
    emit("logout")
  }
  </script>
  
  <style scoped lang="scss">
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    padding: 10px 20px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  
    .logo {
      font-size: 20px;
      font-weight: bold;
      color: #409EFF;
      display: flex;
      align-items: center;
      gap: 8px;
    }
  
    .user-info {
      display: flex;
      align-items: center;
      font-size: 14px;
      color: #606266;
  
      .user-icon {
        margin-right: 5px;
      }
  
      span {
        margin-right: 10px;
      }
  
      .logout-btn {
        color: #F56C6C;
        font-weight: 500;
  
        &:hover {
          color: #d33;
        }
      }
    }
  }
  </style>
  